<template>
  <div class="toolbar-right-move" :class="active ? 'active' : undefined" @click="onChange">
    <SvgIcon icon-class="ic_沙盘"></SvgIcon>
  </div>
</template>

<script lang="ts" setup>
const active = ref(false);
const { cimInstance } = window;

const onChange = () => {
  active.value = !active.value;
  if (active.value) {
    cimInstance.api.setCustomCamera('2.5D', { speed: 20 });
  } else {
    cimInstance.api.resetCustomCamera();
  }
};
</script>

<style lang="less" scoped>
.toolbar-right-move {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #2a2e33;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  &.active {
    background: var(--el-color-primary);
  }

  .svg-icon {
    font-size: 24px;
  }
}
</style>
